<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟教程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            background: url(static/back.jpg)no-repeat center center fixed;
            background-size: 100% 100%;
            background-color: #444;
        }

        .vertical-offset-100{
            padding-top:100px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document).mousemove(function(e){
                TweenLite.to($('body'),
                    .5,
                    { css:
                        {
                            backgroundPosition: ""+ parseInt(event.pageX/8) + "px "+parseInt(event.pageY/'12')+"px, "+parseInt(event.pageX/'15')+"px "+parseInt(event.pageY/'15')+"px, "+parseInt(event.pageX/'30')+"px "+parseInt(event.pageY/'30')+"px"
                        }
                    });
            });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row vertical-offset-100">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default" id="loginbox">
                <div class="panel-heading">
                    <h3 class="panel-title">账号登录</h3>
                </div>
                <div class="panel-body">
                    <form accept-charset="UTF-8" role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="账号" name="email" type="text">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="密码" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="记住我"> 记住我
                                </label>
                            </div>
                            <input class="btn btn-lg btn-success btn-block" id="loginBtn" value="登录">
                            <div class="form-group">
                                <div class="col-md-12 control">
                                    <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                                        还没有账号？
                                        <a href="javascript:void(0);" onClick="$('#loginbox').hide(); $('#signupbox').show()">
                                            点这里注册
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="panel panel-default" id="signupbox">
                <div class="panel-heading">
                    <h3 class="panel-title">账号注册</h3>
                </div>
                <div class="panel-body">
                    <form accept-charset="UTF-8" role="form">
                        <div class="form-group">
                            <!--<label for="email" class="cols-sm-2 control-label">邮箱</label>-->
                            <div class="cols-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                    <input type="text" class="form-control" name="email" id="email"  placeholder="邮箱"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--<label for="username" class="cols-sm-2 control-label">用户名</label>-->
                            <div class="cols-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                                    <input type="text" class="form-control" name="username" id="username"  placeholder="用户名"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--<label for="password" class="cols-sm-2 control-label">密码</label>-->
                            <div class="cols-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                                    <input type="password" class="form-control" name="password" id="password"  placeholder="密码"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--<label for="confirm" class="cols-sm-2 control-label">密码确认</label>-->
                            <div class="cols-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                                    <input type="password" class="form-control" name="confirm" id="confirm"  placeholder="密码确认"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <button type="button" class="btn btn-lg btn-success btn-block" id="registerbtn">注册</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#signupbox").hide();
        $("#loginBtn").click(function () {
            window.location.href="index2.html";
        });
        $("#registerbtn").click(function () {
            window.location.href="login.html";
        });
    });
</script>
</html>